<template>
  <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/home/store/setting' }">仓库设置</el-breadcrumb-item>
                <el-breadcrumb-item>库区设置</el-breadcrumb-item>
                <el-breadcrumb-item>库位设置</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>

  <!--查询条件区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-form v-model="searchWarehouseLocation" style="margin: 15px 0px 0px 0px" inline>
                <el-form-item style="width: 200px;" label="库位编号">
                    <el-input v-model="searchWarehouseLocation.warehouseLocationId"/>
                </el-form-item>
                <el-form-item style="width: 200px;" label="库位名称">
                    <el-input v-model="searchWarehouseLocation.warehouseLocationName"/>
                </el-form-item>
                <el-form-item style="width: 400px;" label="库位定为">
                    <el-input-number min="1" style="width: 100px;" v-model="searchWarehouseLocation.warehouseLocationNumberX"/>
                    <el-input-number min="1" style="width: 100px;" v-model="searchWarehouseLocation.warehouseLocationNumberY"/>
                    <el-input-number min="1" style="width: 100px;" v-model="searchWarehouseLocation.warehouseLocationNumberZ"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cancelSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

  <!--按钮功能区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-button-group>
                <el-button @click="insertWarehouseLocation" type="primary" plain>
                    新增
                </el-button>
                <el-button @click="updateWarehouseLocation(chooseIds)" :disabled="chooseIds.length != 1"  type="success" plain>
                    修改
                </el-button>
                <el-button @click="deleteWHLList" :disabled="chooseIds.length == 0"  type="danger" plain>
                    删除
                </el-button>
            </el-button-group>
        </el-col>
    </el-row>

  <!--表格主体-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-table
                    :data="warehouseLocationList"
                    broder
                    :stripe="true"
                    row-key="warehouseLocationId"
                    size="small"
                    @selection-change="changeChooses"
            >
                <el-table-column align="center" type="selection" width="55"/>
                <el-table-column align="center" label="仓位编号">
                    <template #default="scope">
                        <el-link @click="WHLDesc(scope.row.warehouseLocationId)" style="font-size: small" type="primary">{{scope.row.warehouseLocationId}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="warehouseLocationName" label="库位名称"/>
                <el-table-column align="center" label="库位面积">
                    <template #default="scope">
                        {{scope.row.warehouseLocationArea}} ㎡
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="warehouseLocationNumberX" label="库位X轴位置"/>
                <el-table-column align="center" prop="warehouseLocationNumberY" label="库位Y轴位置"/>
                <el-table-column align="center" prop="warehouseLocationNumberZ" label="库位Z轴位置"/>
                <el-table-column align="center" prop="warehouseLocationDirector" label="库位负责人"/>
                <el-table-column align="center" prop="warehouseLocationNotes" label="库位备注"/>
                <el-table-column width="150" align="center" label="操作">
                    <template #default="scope">
                        <el-row>
                            <el-col :span="12">
                                <el-link @click="updateWarehouseLocation(scope.row.warehouseLocationId)" type="primary">
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                    修改
                                </el-link>
                            </el-col>
                            <el-col :span="12">
                                <el-link @click="deleteWHL(scope.row.warehouseLocationId)" type="primary">
                                    <el-icon>
                                        <DeleteFilled/>
                                    </el-icon>
                                    删除
                                </el-link>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!--分页-->
  <!--分页栏-->
    <el-row style="margin: 5px 5px;">
        <!-- 监听页码的变化事件 -->
        <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
    </el-row>
    <!--新增-->
    <el-dialog
        v-model="dialogWarehouseLocationInsert"
        title="库位新增"
    >
        <el-form v-model="warehouseLocationInsert" label-width="auto">
            <el-form-item label="库位名称">
                <el-input v-model="warehouseLocationInsert.warehouseLocationName"/>
            </el-form-item>
            <el-form-item label="库位面积">
                <el-input-number min="1" v-model="warehouseLocationInsert.warehouseLocationArea"/>
            </el-form-item>
            <el-form-item label="X轴位置">
                <el-input-number min="1" v-model="warehouseLocationInsert.warehouseLocationNumberX"/>
            </el-form-item>
            <el-form-item label="Y轴位置">
                <el-input-number min="1" v-model="warehouseLocationInsert.warehouseLocationNumberY"/>
            </el-form-item>
            <el-form-item label="Z轴位置">
                <el-input-number min="1" v-model="warehouseLocationInsert.warehouseLocationNumberZ"/>
            </el-form-item>
            <el-form-item label="库位负责人">
                <el-input v-model="warehouseLocationInsert.warehouseLocationDirector"/>
            </el-form-item>
            <el-form-item label="库位备注">
                <el-input type="textarea" v-model="warehouseLocationInsert.warehouseLocationNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertWHL" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--修改-->
    <el-dialog
        v-model="dialogWarehouseLocationUpdate"
        title="库位修改"
    >
        <el-form v-model="warehouseLocationUpdate" label-width="auto">
            <el-form-item label="库位名称">
                <el-input v-model="warehouseLocationUpdate.warehouseLocationName"/>
            </el-form-item>
            <el-form-item label="库位面积">
                <el-input-number min="1" v-model="warehouseLocationUpdate.warehouseLocationArea"/>
            </el-form-item>
            <el-form-item label="X轴位置">
                <el-input-number min="1" v-model="warehouseLocationUpdate.warehouseLocationNumberX"/>
            </el-form-item>
            <el-form-item label="Y轴位置">
                <el-input-number min="1" v-model="warehouseLocationUpdate.warehouseLocationNumberY"/>
            </el-form-item>
            <el-form-item label="Z轴位置">
                <el-input-number min="1" v-model="warehouseLocationUpdate.warehouseLocationNumberZ"/>
            </el-form-item>
            <el-form-item label="库位负责人">
                <el-input v-model="warehouseLocationUpdate.warehouseLocationDirector"/>
            </el-form-item>
            <el-form-item label="库位备注">
                <el-input type="textarea" v-model="warehouseLocationUpdate.warehouseLocationNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="updateWHL" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--详情弹窗-->
    <el-dialog
        v-model="dialogWarehouseLocationDesc"
    >
        <el-descriptions title="库区详情">
            <el-descriptions-item align="left" label="库位编号">{{ warehouseLocationDesc.warehouseLocationId }}</el-descriptions-item>
            <el-descriptions-item align="left" label="库位名称">{{ warehouseLocationDesc.warehouseLocationName}}</el-descriptions-item>
            <el-descriptions-item align="left" label="库位面积">{{ warehouseLocationDesc.warehouseLocationArea}}㎡</el-descriptions-item>
            <el-descriptions-item align="left" label="库位负责人">{{ warehouseLocationDesc.warehouseLocationDirector}}</el-descriptions-item>
            <el-descriptions-item align="left" label="库位备注">{{ warehouseLocationDesc.warehouseLocationNotes}}</el-descriptions-item>
            <el-descriptions-item></el-descriptions-item>
            <el-descriptions-item align="left" label="库区创建时间">{{ warehouseLocationDesc.warehouseLocationCreateTime}}</el-descriptions-item>
            <el-descriptions-item align="left" label="库区修改时间">{{ warehouseLocationDesc.warehouseLocationModifyTime}}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script setup>

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import warehouseLocation from "@/api/warehouse/warehouseLocation.js";
import {ArrowRight} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import warehouseArea from "@/api/warehouse/warehouseArea.js";

let dialogWarehouseLocationInsert = ref(false)
let dialogWarehouseLocationUpdate = ref(false)
let dialogWarehouseLocationDesc = ref(false)
let route = useRoute()
let searchWarehouseLocation = ref({})
let warehouseAreaId = ref()
let warehouseLocationList = ref([])
let pageNum = ref(1)
let total = ref(0)
let warehouseLocationInsert = ref({})
let warehouseLocationUpdate = ref({})
let warehouseLocationDesc = ref({})
let chooseIds = ref([])

function WHLDesc(warehouseLocationId){
    warehouseLocation.loadSearchInfo(warehouseLocationId,warehouseAreaId.value,res=>{
        warehouseLocationDesc.value = res.data
    })
    dialogWarehouseLocationDesc.value = true
}

function deleteWHLList(){
    ElMessageBox.confirm(
        '你确定要删除仓库吗',
        '删除类型',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        chooseIds.value.forEach(id => {
            warehouseLocation.deleteWarehouseLocation(id,warehouseAreaId.value,res=>{
                loadWarehouseLocationList()
            })
        })
        ElMessage({
            type: "success",
            message: "删除成功"
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function changeChooses(value){
    let tempIds = new Array();
    value.forEach(warehouseLocation => {
        tempIds.push(warehouseLocation.warehouseLocationId)
    })
    chooseIds.value = tempIds;
}

function deleteWHL(warehouseLocationId){
    ElMessageBox.confirm(
        '你确定要删除库区吗',
        '删除类型',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        warehouseLocation.deleteWarehouseLocation(warehouseLocationId,warehouseAreaId.value, res => {
            if (res.code == 1) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
                loadWarehouseLocationList()
            } else {
                ElMessage({
                    type: "error",
                    message: "网络开了小差，请稍后重试"
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function updateWHL(){
    warehouseLocation.updateWarehouseLocation(warehouseLocationUpdate.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "修改成功"
            })
            loadWarehouseLocationList()
            cancelUpdate()
        }else if (res.code == 500){
            ElMessage({
                type: "warning",
                message: "库区面积不足"
            })
        }else if (res.code == 600){
            ElMessage({
                type: "error",
                message: "当前库位正被使用、或当前库位超过限制"
            })
        }  else{
            ElMessage({
                type: "error",
                message: "修改失败"
            })
        }
    })
}

function cancelUpdate(){
    warehouseLocationUpdate.value = new ref({})
    dialogWarehouseLocationUpdate.value = false
}
function updateWarehouseLocation(warehouseLocationId){
    warehouseLocation.loadSearchInfo(warehouseLocationId,warehouseAreaId.value,res=>{
        warehouseLocationUpdate.value = res.data
    })
    warehouseLocationUpdate.value.warehouseAreaId = warehouseAreaId.value
    dialogWarehouseLocationUpdate.value = true
}

function insertWHL(){
    warehouseLocationInsert.value.warehouseLocationStatus = 1
    if (warehouseLocationInsert.value.warehouseLocationName == undefined || warehouseLocationInsert.value.warehouseLocationArea == undefined || warehouseLocationInsert.value.warehouseLocationNumberX == undefined || warehouseLocationInsert.value.warehouseLocationNumberY == undefined || warehouseLocationInsert.value.warehouseLocationNumberZ == undefined || warehouseLocationInsert.value.warehouseLocationDirector == undefined){
        ElMessage({
            type: "error",
            message: "缺少关键元素"
        })
        throw new Error("缺少关键元素")
    }
    warehouseLocation.insertWarehouseLocation(warehouseLocationInsert.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadWarehouseLocationList()
            cancelInsert()
        }else if (res.code == 500){
            ElMessage({
                type: "warning",
                message: "仓库面积不足"
            })
        }else if (res.code == 600){
            ElMessage({
                type: "error",
                message: "当前库位正被使用、或当前库位超过限制"
            })
        } else{
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

function cancelInsert(){
    warehouseLocationInsert.value = new ref({})
    dialogWarehouseLocationInsert.value = false
}

function insertWarehouseLocation(){
    dialogWarehouseLocationInsert.value = true
    warehouseLocationInsert.value.warehouseAreaId = warehouseAreaId.value
}

function cancelSearch(){
    searchWarehouseLocation.value = new ref({})
    searchWarehouseLocation.value.warehouseAreaId = warehouseAreaId.value
    loadWarehouseLocationList()
}

function search(){
    loadWarehouseLocationList()
}
function changePage(value){
    pageNum.value = value;
    loadWarehouseLocationList()
}

function loadWarehouseLocationList(){
    warehouseLocation.loadWarehouseLocationList(searchWarehouseLocation.value,pageNum.value,10,res=>{
        warehouseLocationList.value = res.list
        total.value = res.total
        console.log(warehouseLocationList.value)
    })
}

onMounted(()=>{
    warehouseAreaId.value = route.params.warehouseAreaId
    searchWarehouseLocation.value.warehouseAreaId = route.params.warehouseAreaId
    loadWarehouseLocationList()
})

</script>

<style scoped>

</style>